<template>
  <div class="base-list-page">
    <!-- 搜索表单区域 -->
    <slot name="searchForm">
      <search-form
        v-if="searchItems && searchItems.length"
        :search-items="searchItems"
        :initial-values="searchParams"
        :show-advanced="showAdvancedSearch"
        :loading="loading"
        :query-params="queryParams"
        @search="handleSearch"
        @reset="handleReset"
      />
    </slot>

    <!-- 自定义内容区域（搜索与操作按钮之间） -->
    <slot name="afterSearch"></slot>

    <!-- 操作按钮区域 -->
    <slot name="actionBar">
      <action-bar
        v-if="actions && actions.length"
        :actions="actions"
        :selected-rows="selectedRows"
        :selected-row-keys="selectedRowKeys"
        @action="handleActionClick"
      />
    </slot>

    <!-- 自定义内容区域（操作按钮与表格之间） -->
    <slot name="beforeTable"></slot>

    <!-- 表格区域 -->
    <slot name="dataTable">
      <data-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        :row-key="rowKey"
        :row-selection="showSelection ? rowSelection : undefined"
        :scroll="scroll"
        @change="handleTableChange"
      >
        <!-- 自定义列渲染 -->
        <template v-for="(_, name) in $slots" #[name]="slotData">
          <slot :name="name" v-bind="slotData"></slot>
        </template>
      </data-table>
    </slot>

    <!-- 自定义内容区域（表格之后） -->
    <slot name="afterTable"></slot>

    <!-- 其他自定义内容（如模态框等） -->
    <slot name="extraContent"></slot>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import SearchForm from './SearchForm.vue';
import ActionBar from './ActionBar.vue';
import DataTable from './DataTable.vue';

/**
 * 基础列表页组件
 * 整合搜索表单、操作按钮、数据表格的容器组件
 */
const props = defineProps({
  /** 表格列配置 */
  columns: {
    type: Array,
    default: () => []
  },
  /** 表格数据源 */
  dataSource: {
    type: Array,
    default: () => []
  },
  /** 表格行主键 */
  rowKey: {
    type: [String, Function],
    default: 'id'
  },
  /** 表格加载状态 */
  loading: {
    type: Boolean,
    default: false
  },
  /** 表格分页配置 */
  pagination: {
    type: [Object, Boolean],
    default: false
  },
  /** 搜索表单项配置 */
  searchItems: {
    type: Array,
    default: () => []
  },
  /** 操作按钮配置 */
  actions: {
    type: Array,
    default: () => []
  },
  /** 是否显示行选择 */
  showSelection: {
    type: Boolean,
    default: false
  },
  /** 是否显示高级搜索 */
  showAdvancedSearch: {
    type: Boolean,
    default: false
  },
  /** 初始搜索参数 */
  searchParams: {
    type: Object,
    default: () => ({})
  },
  /** 查询参数 */
  queryParams: {
    type: Object,
    default: () => ({})
  },
  /** 表格滚动配置 */
  scroll: {
    type: Object,
    default: () => ({ x: 'max-content', y: 450 })
  }
});

const emit = defineEmits([
  'search',
  'reset',
  'change',
  'selectionChange',
  'action'
]);


// 选择行相关
const selectedRowKeys = ref([]);
const selectedRows = ref([]);
// 行选择配置
const rowSelection = computed(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys, rows) => {
    selectedRowKeys.value = keys;
    selectedRows.value = rows;
    emit('selectionChange', keys, rows);
  }
}));

// 处理搜索
const handleSearch = (values) => {  
  emit('search', values);
};

// 处理重置
const handleReset = () => {
  // 触发重置事件
  emit('reset');
};

// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
  emit('change',  pagination, filters, sorter );
};

// 处理操作按钮点击
const handleActionClick = (action, selectedKeys, selectedItems) => {
  emit('action', action, selectedKeys, selectedItems);
};

// 清空选择
const clearSelection = () => {
  selectedRowKeys.value = [];
  selectedRows.value = [];
};

// 暴露方法
defineExpose({
  selectedRowKeys,
  selectedRows,
  clearSelection
});

// 监听dataSource变化，清空选择
watch(() => props.dataSource, () => {
  clearSelection();
}, { deep: true });
</script>

<style scoped>
.base-list-page {
  width: 100%;
  padding-bottom: 24px;
}
</style>
